<template>
	<view  class="home">
		<!-- pageone -->
		<u-mask :show="pageOne">
		<view  class="firstPage">
			<view v-if="kai" class="">
				<view class="box content">
					<div @click="open" class="breathing-light">
						<image src="../static/you-magic/images/3.png" mode=""></image>
					</div>
				</view>
				
				
				<view class="read">
					<u-checkbox size="26" label-size="20rpx" active-color="#FEDB84" shape="circle" v-model="checked">我已认真阅读并同意
					</u-checkbox><text @click="rules=true">《圣牧有机品牌中秋抽奖活动规则》</text>
				</view>
			</view>
			
		
		</view>
		
		</u-mask>
		<!-- pagetwo -->

		<u-mask :show="pageTwo">
			<view v-if="pageTwo" class="pagetwo">

				<view v-if="info" class="bgs">
					<image @click="pageTwo=false;kai=true" class="close" src="../static/you-magic/images/close.png"
						mode=""></image>
					
					
					<view v-if="info.level=='特等奖'" class="tdj">
						<image src="../static/you-magic/images/four.png" mode=""></image>
						{{info.redeem_code}}
						
						<view class="dhm">
							
							{{info.redeem_code}}
							
							<u-tag class="u-m-l-20" style="color: #CE372E;" @click="copy(info.redeem_code)" mode="dark" text="一键复制"
								shape="circle" type="warning" />
								<img class="hand" src="../static/you-magic/images/hand.png" />
							
						</view> 
						
					</view>
					<view v-else-if="info.level=='一等奖' ||info.level=='二等奖' " class="ydj">
						<image v-if="info.level=='一等奖'" src="../static/you-magic/images/one1.png" mode=""></image>
						<image v-else src="../static/you-magic/images/two2.png" mode=""></image>
						{{info.redeem_code}}
						
						<view class="dhm">
							
							{{info.redeem_code}}
							
							<u-tag class="u-m-l-20" style="color: #CE372E;" @click="copy(info.redeem_code)" mode="dark" text="一键复制"
								shape="circle" type="warning" />
								<img class="hand" src="../static/you-magic/images/hand.png" />
							
						</view> 
						
					</view>
					
					
					<!-- <view v-else-if="info.level=='二等奖'" class="ydj">
						
						<image src="../static/you-magic/images/two.png" mode=""></image>
						{{info.redeem_code}}
						
						<view class="dhm">
							
							{{info.redeem_code}}
							
							<u-tag class="u-m-l-20" style="color: #CE372E;" @click="copy(info.redeem_code)" mode="dark" text="一键复制"
								shape="circle" type="warning" />
								<img class="hand" src="../static/you-magic/images/hand.png" />
							
						</view> 
						
					</view> -->
					
					<!-- <image v-else-if="info.level=='一等奖'" src="../static/you-magic/images/one.png" mode=""></image> -->
					<!-- <image v-else-if="info.level=='二等奖'" src="../static/you-magic/images/two.png" mode=""></image> -->
					<view v-else class="three">
						<image  src="../static/you-magic/images/hb.png" class="hb" mode=""></image>
						<!-- <image @click="jump(info.link)" src="../static/you-magic/images/hb.png" class="hb" mode=""></image> -->
						<img style="width: 100%; display: block; height: auto;"  src="../static/you-magic/images/three.png" />
					</view>
					
					<!-- <view v-if="info.level!='三等奖'" class="dhm">
						
						兑奖码：{{info.redeem_code}}
						
						<u-tag class="u-m-l-20" style="color: #CE372E;" @click="copy(info.redeem_code)" mode="dark" text="一键复制"
							shape="circle" type="warning" />
							<img class="hand" src="../static/you-magic/images/hand.png" />
						
					</view> -->
				</view>


				<!-- <view v-if="info.level=='特等奖' || info.level=='三等奖'" class="btns">
					<img @click="jump(info.link)" src="../static/you-magic/images/button.png" />
				</view> -->
				
				<view v-if="info.level=='特等奖'" class="btns">
					<img @click="jump(info.link)" src="../static/you-magic/images/button.png" />
				</view>
			</view>
		</u-mask>

	

		<!-- 活动规则 -->

		<u-popup :closeable="true"  mode="center" border-radius="30" v-model="rules" width="688rpx">
			<view class="tits">
			圣牧有机品牌中秋抽奖活动规则
			</view>
			
			<view class="rulesMask">
				<scroll-view scroll-y="true" style="height: 700rpx;">
					<view class="words">
						一、活动内容
						<br />1、活动主办方:内蒙古蒙牛圣牧高科乳品有限公司。
						<br />2、活动时间:2024年8月1日0时整至2024年12月31日24时。
						<br />3、活动区域:中国大陆境内(不含香港、澳门及台湾地区)
						<br />4、具体活动事项:此次活动为圣牧“中秋国庆有机大礼包开箱抢黄金”主题。凡通过正常购买途径获得印有“有机大礼包开箱抢黄金”标识的圣牧牛奶产品，箱内均有箱卡，通过刮卡即可有机会抽取以下奖品之一，本活动综合中奖率为100%，所述中奖率均以四舍五入计算。
						<br />5、活动参与条件:
						<br />(1)每提牛奶产品中最多可能含有1张箱卡，每张箱卡只有1次抽奖机会，重复抽奖无效。
						<br />(2)每个微信账户(每个账户视为一个单独主体)每日最多可参与10次抽奖，如超过限制则无法继续抽奖。
						<br />6、活动参与方式:
						<br />(1)在活动期间购买圣牧有机牛奶产品，打开牛奶箱后如果得到“有机大礼包开箱抢黄金”箱卡，该箱卡可用于抽奖。
						<br />(2)得到箱卡后，刮开箱卡涂层并使用微信手机客户端扫码参与抽奖。
						<br />(3)阅读并同意活动规则后，即可得知获得奖品名称并按提示操作兑奖。
						
						<br />二、奖项设置
						<br />1、特等奖:价值1888元的足金金牛（具体价值随市场金价变动），总计66份，中奖率约0.003%
						<br />2、一等奖:价值88元有机玉米礼盒，总计888份，中奖率约0.044%
						<br />3、二等奖:价值18元有机小米，总计10888份，中奖率约0.544%
						<br />4、三等奖:圣牧小程序商城惊喜礼券，总计约1980000份，中奖率约99.41%;优惠券可用于购买圣牧有机微信小程序内部分参与活动的有机商品，不可叠加其他优惠活动，使用有效期限截止到2024年12月31日。
						
						<br />三、奖项规则
						<br />1、以上所有奖项为权益型奖项，不兑换现金，不设找零，不得转让。
						<br />2、本活动刮开图层即认定为中奖，每张中奖卡片只有一次兑换机会，兑换完成后，兑换码即失效。
						<br />3、兑奖时间于2024年8月1日0时整开始，2024年12月31日24时整截止，期间如未兑换即认定为放弃中奖资格，相应奖项权益作废。
						<br />4、本活动中，卡片综合中奖率100%，抽奖者中奖奖品以卡片内容为主。
						<br />5、此次奖品仅限中奖者参与本活动的微信账号领取，转发或由其他账号领取无效。
						<br />6、如获得实物奖品，请根据页面内容填写相关信息，以便我们将奖品邮寄到您，特等奖填写完信息后，我们将在9月10日起陆续发货；二三等奖我们将于填写完信息后的7个工作日内，将奖品以邮寄形式免费(新疆、西藏等偏远地区需要额外加收运费，详情见商品支付页面提示)发送至您填写的信息地址，请耐心等待。
						
						<br />四、兑换流程
						<br />1、刮卡后，使用微信手机客户端扫描二维码
						<br />2、根据页面提示进行操作并领奖
						<br />3、一二三等奖进入兑奖页面后，按照提示复制页面内兑换码，复制完成后点击兑换领奖进入完成后填写相关信息即可
						<br />4、如未成功兑换，可搜索【圣牧有机】小程序咨询客服，进行人工核对。
						<br />5、中奖者务必在兑换相应奖项时如实填写相关信息，否则可能影响奖项兑换。
						
						<br />五、活动咨询与售后
						<br />活动详情及售后咨询服务热线:中奖者可自行与圣牧有机小程序(店铺名称为:圣牧有机)在线客服联系处理(周一至周五9点-17点，法定节假日除外)。
						相应奖项在兑换后，如因存在质量或使用问题，请及时与圣牧有机小程序(店铺名称为:圣牧有机)在线客服联系处理(周一至周五9点-17点，法定节假日除外)。
						
						<br />六、活动声明
						<br />1、在参与活动中如用户出现违规行为(如通过非正当途径获得、虚假交易、将兑奖信息分享给他人同时兑奖等)，主办方有权取消获奖资格，并收回全部活动权益(含已使用的合未使用的)。
						<br />2、因登记信息不正确、不真实、未在规定时间内提交等获奖者个人因素而导致奖品不能领取的，相关责任由该获奖者承担。
						<br />3、中奖者领奖过程中所发生的个人费用(包括但不限于上网费、短信费等)需自理，主办方不做任何形式的补偿。
						<br />4、主办方及生产商、本活动的代理商、广告公司、印刷公司和相关合作企业之员工，不可参加此次促销活动，以示公允。
						
						<br />注:您点击进入兑换流程则视为您已充分阅读并理解此次活动规则及内容，并同意按照此规则及内容参与此活动。
					</view>

				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import 'animate.css';
	export default {
		data() {
			return {
				rules: false,
				checked: true,
				pageOne: false,
				kai: false,
				pageTwo: false,
				type: 1,
				curCode: '',
				info: null
			}
		},
		methods: {
			jump(url) {
				window.location.href = url

			},
			open() {
				
				if(!this.checked){
					this.$u.toast('请先阅读并同意圣牧有机品牌中秋抽奖活动规则！');
					
					return
				}
			

				this.$u.api
					.search(this.curCode)
					.then((res) => {
						
						// this.pageOne = false
						this.kai = false
						this.pageTwo = true

						console.log(res, 77777);
						this.info = res.info
					});
			},
			copy(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功',
							icon: "none"
						})
					}
				});
			}
		},
		onLoad(e) {
			this.curCode = e?.v
			this.type = e.type
			setTimeout(() => {
				this.kai = true
				this.pageOne = true
			}, 2000)
		}
	}
</script>
<style>
	page {
		overflow: hidden;
		width: 100%;
		height: 100vh;
		background: url('../static/you-magic/images/1.png') no-repeat;
		background-size: cover;
	}
</style>
<style scoped lang="scss">
	.hand{
		width: 20px;
		display: block;
		height: auto;
		margin-left: 10px;
	}
	.step{
		border-radius: 50%;
		width: 24rpx;
		height: 24rpx;
		background: #FDE396;
		font-family: FZLTZCHK--GBK1, FZLTZCHK--GBK1;
		font-weight: normal;
		font-size: 16rpx;
		color: #C9332C;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.step1{
		position: absolute;
		right: -20px;
		top: -10px;
	}
	
	/deep/ .u-mode-center-box{
		background: url('../static/you-magic/images/tankuangbg.png') no-repeat;
		background-size: cover;
		width: 688rpx;
		height: 952rpx;
	}
	.rulesMask{
		margin: 0 30rpx;
		.words{
			line-height: 25px;
			font-size: 26rpx;
		}
	}
	.tits{
		padding: 80px 0 10px;
		text-align: center;
		font-size: 17px;
	}
	.bgs {
		position: relative;
		
		.dhm {
			position: absolute;
			bottom: 50rpx;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: FZLTZHK--GBK1, FZLTZHK--GBK1;
			font-weight: normal;
			font-size: 24rpx;
			color: #FDDF8C;
			// line-height: 27rpx;
			// margin: 20px 0;
		}

		image {
			display: block;
			width: 740rpx;
			height: 875rpx;
			margin: 42rpx auto 0;
		}
		.tdj{
			image{
				height: 996rpx !important;
				
			}
			.dhm {
				bottom: 130rpx;
			}
		
		}
		.ydj{
			image{
				height: 1198rpx !important;
				
			}
			.dhm {
				bottom: 360rpx;
			}
		}
		.three{
			position: relative;
			.hb{
				display: block;
				width: 346rpx;
				height: 314rpx;
				margin: 0 auto;
				position: absolute;
				top: 336rpx;
				left: 50%;
				margin-left: -173rpx;
				z-index: 88;
				animation: breath 2s ease-in-out infinite;
			}
			@keyframes breath {
			  0% {
			    transform: scale(1);
			  }
			  50% {
			    transform: scale(1.1);
			  }
			  100% {
			    transform: scale(1);
			  }
			}
		}

		.close {
			position: absolute;
			width: 46rpx;
			height: 46rpx;
			right: 77rpx;
			top: 30rpx;
			z-index: 8;
		}

		


	}

	
	/deep/ .u-checkbox__label {
		margin-right: 0;
		margin-left: 13rpx;
		font-family: FZLTZHK--GBK1, FZLTZHK--GBK1;
		font-weight: normal;
		font-size: 20rpx;
		color: #FEDB84;
		line-height: 52rpx;
		text-align: center;
		font-style: normal;
	}

	.pagetwo {
		.btns {
			position: relative;
			margin: 42rpx 0;

			img {
				width: 450rpx;
				display: block;
				height: auto;
				margin: 0 auto;
			}
			.step2{
				position: absolute;
				right: 150rpx;
				top:-10px;
			}

			// a {
			// 	color: #fff;
			// 	text-decoration: none;
			// }
		}


		.names {
			font-size: 20px;
			font-weight: bold;
			text-align: center;
			padding: 100px 0;
		}

		.jp {
			image {
				display: block;
				margin: 0 auto;
				width: 300px;
				height: 240px;
				border-radius: 10px;
			}
		}
	}

	.firstPage {
		position: relative;
		width: 100%;
		height: 100%;
		.read {
			position: absolute;
			bottom: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			left: 0;
			right: 0;
		
			text {
				font-family: FZLTZHK--GBK1, FZLTZHK--GBK1;
				font-weight: normal;
				font-size: 24rpx;
				color: #fff;
				line-height: 52rpx;
				text-align: center;
				font-style: normal;
			}
		}
		
		
	.box {
		// margin: 50px auto;
		width: 735rpx;
		height:822rpx;
		background: url('../static/you-magic/images/22.png') no-repeat;
		background-size: cover;
		// background-image: linear-gradient(to right, #f3e5cb, #e5bd5b);
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -368rpx;
		margin-top: -460rpx;
		// border-radius: 10px;
	}

		.words {
			text-align: center;
			font-weight: bold;
			font-size: 34px;
			padding-top: 40px;
		}
	}

	.button {
		margin: 100px;
		width: 30px;
		height: 30px;
		background: orange;
		border-radius: 50px;
		animation: flipping 5s ease-in-out 0s 1 alternate forwards;
		/*去除button默认边框*/
		background-position-x: -7px;
		background-position-y: -7px;
		border: 1px;
		outline: none;
	}

	@keyframes flipping {
		0% {
			opacity: .2;
			transform: scale(1);
		}

		25% {
			opacity: 1;
			box-shadow: 0 0 15px orange;
			transform: scale(1.4);
		}

		50% {
			opacity: .2;
			transform: scale(1);
		}

		75% {
			opacity: 1;
			box-shadow: 0 0 15px orange;
			transform: scale(1.4);
		}

		100% {
			opacity: .2;
			transform: scale(1);
		}
	}

	.breathing-light {
		position: absolute;
		left: 50%;
		top: 56%;
		margin-top: -10px;
		margin-left: -50px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40px;
		font-weight: bold;
		width: 185rpx;
		height: 185rpx;
		// background-color: #f9eda3;
		border-radius: 50%;
		box-shadow: 0 0 0 0 rgba(249, 237, 163, 1.0);
		animation: breathing 2.5s ease-in-out infinite;

		image {
			width: 185rpx;
			height: 185rpx;
		}
	}

	@keyframes breathing {
		0% {
			box-shadow: 0 0 0 0 rgba(248, 244, 122, 0.7);
			transform: scale(1);
		}

		50% {
			box-shadow: 0 0 20px 20px rgba(248, 244, 122, 0);
			transform: scale(1.2);
		}

		100% {
			box-shadow: 0 0 0 0 rgba(248, 244, 122, 0.7);
			transform: scale(1);
		}
	}




	@-webkit-keyframes zy {
		10% {
			transform: rotate(15deg);
		}

		20% {
			transform: rotate(-10deg);
		}

		30% {
			transform: rotate(5deg);
		}

		40% {
			transform: rotate(-5deg);
		}

		50%,
		100% {
			transform: rotate(0deg);
		}
	}

	/* 使用 */
	.content {

		animation: zy 2.5s .15s linear infinite;
	}
</style>
